<template>
  <el-card shadow="never" class="box">
    <template #header>
      <span class="title" style="font-size:28px;font-weight:700">发退药记录查询</span>
    </template>

    <!-- 1. 搜索行 -->
    <el-form :inline="true" class="top-bar">
      <el-form-item label="病历号/姓名：">
        <el-input v-model="search.key" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="状态：">
    <el-select v-model="search.state" placeholder="全部" clearable style="width:120px">
      <el-option label="全部" value="" />
      <el-option label="已发药" value="发药" />
      <el-option label="已退药" value="退药" />
    </el-select>
  </el-form-item>
      <el-form-item label="日期：">
        <el-date-picker v-model="dateRange" type="daterange" range-separator="至"
                        start-placeholder="开始" end-placeholder="结束" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
        <el-button @click="handleRecent">最近 7 天</el-button>
      </el-form-item>
    </el-form>

    <!-- 2. 表格 -->
    <el-table :data="pageTable" stripe border size="small">
      <el-table-column prop="patientCaseNo" label="病历号" />
      <el-table-column prop="patientName" label="患者姓名" />
      <el-table-column prop="drugName" label="药品名称" />
      <el-table-column prop="createTime" label="发/退药时间" />
      <el-table-column prop="doctorName" label="主诊医师" />
      <el-table-column prop="quantity" label="数量" />
      <el-table-column label="费用">
        <template #default="{row}">¥{{ row.fee.toFixed(2) }}</template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{row}">
          <el-button size="small" @click="showFeeDetail(row)">费用详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 3. 分页 -->
    <el-pagination :current-page="page.current" :page-size="page.size"
                   :total="filterList.length" layout="prev, pager, next, jumper,->,total,slot"
                   @current-change="handlePage" class="pagination">
      <template #slot>
        跳至<el-input-number v-model="jumpPage" :min="1" :max="maxPage" controls-position="right"
                           @change="jumpTo" style="width:60px;margin:0 8px" />页
      </template>
    </el-pagination>

    <!-- 4. 费用详情弹窗 -->
    <!-- 费用详情弹窗 -->
<el-dialog title="药品费用详情" v-model="feeVisible" width="420px">
  <div v-if="currentRow" style="margin-bottom:12px;">
    <span>患者：{{ currentRow.patientName }}</span>
    <span style="margin-left:16px;">病历号：{{ currentRow.patientCaseNo }}</span>
    <span style="margin-left:16px;">药品：{{ currentRow.drugName }}</span>
    <span style="margin-left:16px;">数量：{{ currentRow.quantity }}</span>
    <span style="margin-left:16px;">总费用：¥{{ currentRow.fee.toFixed(2) }}</span>
  </div>
  <div style="margin-top:12px;text-align:right;">
    <span style="color:#606266;font-size:14px;">发药状态：</span>
    <el-tag :type="currentRow.opType === '发药' ? 'success' : 'warning'">
      {{ currentRow.opType }}
    </el-tag>
  </div>
</el-dialog>
  </el-card>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from 'vue'
import {ElMessage} from 'element-plus'
import {Search} from '@element-plus/icons-vue'
import request from '@/utils/request'

/* ---------- 数据 ---------- */
const list = ref([])
const search = reactive({key: '', state: '',start: '', end: ''})
const dateRange = ref([])
const page = reactive({current: 1, size: 10})
const jumpPage = ref(1)
const feeVisible = ref(false)
const feeList = ref([])
const feeState = ref('') //发药状态

/* ---------- 业务 ---------- */
const fetchList = async () => {
  const [start, end] = dateRange.value ?? []
  const {data} = await request.get('/api/pharmacyRecord/list', {
    params: {
      key: search.key,
      state: search.state,
      start: start ? start.toISOString() : '',
      end: end ? end.toISOString() : ''
    }
  })
  list.value = data
  page.current = 1
}
const handleSearch = () => fetchList()
const handleRecent = () => {
  const end = new Date()
  const start = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
  dateRange.value = [start, end]
  fetchList()
}
const currentRow = ref(null)

const showFeeDetail = (row) => {
  currentRow.value = row
  feeVisible.value = true
}
const handlePage = val => page.current = val
const jumpTo = val => page.current = val

/* ---------- 计算 ---------- */
const filterList = computed(() => list.value)
const pageTable = computed(() => {
  const start = (page.current - 1) * page.size
  return filterList.value.slice(start, start + page.size)
})
const maxPage = computed(() => Math.ceil(filterList.value.length / page.size))

onMounted(() => handleRecent())
</script>

<style lang="scss" scoped>
.box{padding:0 20px 20px}
.top-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pagination{display:flex;justify-content:center;margin-top:16px}
</style>